<script lang="ts" setup>
  import type { CmsExamQuestion } from '@/types/cms';
  import { ref, watch } from 'vue';

  const props = defineProps<{
    question: Partial<CmsExamQuestion>;
    index: number;
  }>();

  const emit = defineEmits(['change', 'down', 'up', 'remove']);

  const localValue = ref<Partial<CmsExamQuestion>>(props.question);

  const ChoiceIndex = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];

  const removeChoice = (index: number) => {
    if (localValue.value.choices) {
      localValue.value.choices.splice(index, 1);
    }
  };
  const handleAddChoice = () => {
    if (!localValue.value.choices) {
      localValue.value.choices = [];
    }
    localValue.value.choices.push({});
  };

  watch(
    [localValue],
    () => {
      emit('change', localValue.value);
    },
    {
      deep: true,
    }
  );

  const downQuestion = () => {
    emit('down');
  };
  const upQuestion = () => {
    emit('up');
  };
  const removeQuestion = () => {
    emit('remove');
  };
</script>

<template>
  <div class="question">
    <div class="question-header">
      <a-space>
        <a-link @click="upQuestion"><icon-arrow-up />上移</a-link>
        <a-link @click="downQuestion"><icon-arrow-down />下移</a-link>
        <a-link @click="removeQuestion"><icon-close />删除</a-link>
      </a-space>
    </div>
    <div>
      <a-form-item
        hide-label
        :field="`questions[${index}].title`"
        :rules="[{ required: true, message: '不能为空' }]"
      >
        <a-input v-model="localValue.title" placeholder="请输入问题" />
      </a-form-item>

      <a-form-item
        hide-label
        :field="`questions[${index}].rightChoice`"
        :rules="[{ required: true, message: '不能为空' }]"
      >
        <a-select v-model="localValue.rightChoice" placeholder="正确答案">
          <a-option
            v-for="(choice, choiceIndex) in localValue.choices || []"
            :key="choiceIndex"
            :value="ChoiceIndex[choiceIndex]"
          >
            {{ ChoiceIndex[choiceIndex] }}. {{ choice.title }}
          </a-option>
        </a-select>
      </a-form-item>

      <div
        v-for="(choice, choiceIndex) in localValue.choices || []"
        :key="choiceIndex"
        class="choice"
      >
        <span class="choice-index">{{ ChoiceIndex[choiceIndex] }}.</span>
        <div class="choice-input">
          <a-form-item
            hide-label
            :field="`questions[${index}].choices[${choiceIndex}].title`"
            :rules="[{ required: true, message: '不能为空' }]"
          >
            <a-input
              v-model="choice.title"
              :placeholder="`请输入${ChoiceIndex[choiceIndex]}答案`"
            />
          </a-form-item>
        </div>
        <div class="choice-delete">
          <a-button
            shape="round"
            size="mini"
            @click="removeChoice(choiceIndex)"
          >
            <template #icon><icon-close /></template>
          </a-button>
        </div>
      </div>

      <div v-if="(localValue.choices || []).length < 5" class="choice">
        <span class="choice-index"></span>
        <div>
          <a-button @click="handleAddChoice">添加答案</a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .question {
    padding: 12px;
    border: 1px solid rgb(var(--gray-2));
    border-radius: 4px;
    margin-bottom: 20px;

    &-header {
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }

  .choice {
    display: flex;
    align-items: center;

    &-index {
      line-height: 32px;
      margin-bottom: 20px;
      margin-right: 10px;
      width: 30px;
      padding-left: 10px;
    }

    &-input {
      width: 400px;
    }

    &-delete {
      margin: 0 0 20px 10px;
    }
  }
</style>
